<template>
  <div style="height:calc(100% - 85px)">
    <div class="shelf-detail">
      <div v-for="row in maxrowno" :key="'row' + row" :class="['shelf-row', row == 1 ? 'first-row' : '']">
        <div class="nofirst-row">
          <template v-if="tableData.length > 0">
            <div
              :class="['shelf-position', tableData[row - 1][col - 1].rpt_itemcode ? tableData[row - 1][col - 1].selectflag ? 'shelf-inuse-focus' :
                'shelf-inuse' : tableData[row - 1][col - 1].selectflag ? 'shelf-unuse-focus' : '']"
              v-for="col in maxcolno" :key="'col' + col" @mouseup="MouseDown(row, col, $event)">
              <div v-show="tableData[row - 1][col - 1].rpt_itemcode != ''">
                <div :class="tableData[row - 1][col - 1].selectflag ? 'radius-color-inuse' : 'radius-color-unuse'"></div>
                <div :class="tableData[row - 1][col - 1].selectflag ? 'radius-rptname-inuse' : 'radius-rptname-unuse'">
                  {{ tableData[row - 1][col - 1].rpt_itemname }}</div>
              </div>

            </div>
          </template>
          <template v-else>
            <div class="shelf-position" v-for="col in maxcolno" :key="'col' + col"></div>
          </template>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import XE from "xe-utils";
export default {
  props: ["editflag"],
  name: "rmlabreportgenegroup",
  data() {
    return {
      PRGNO: "",
      maxrowno: 0,
      maxcolno: 0,
      tableDataResult: [],
      tableTotalData: [],
      tableData: []
    };
  },
  watch: {},
  created() { },
  methods: {
    QueryGene(patinfo) {
      this.$tool
        .request({
          url: "LIS/LIS3/LIS314",
          method: "post",
          data: {
            action: "querygenelist",
            barcode: patinfo.barcode,
            reportid: patinfo.reportid
          }
        })
        .then(res => {
          if (res.errcode == "1") {
            if (res.numdt && res.numdt.length > 0) {
              this.maxrowno = res.numdt[0].maxrowno;
              this.maxcolno = res.numdt[0].maxcolno;
              this.tableDataResult = res.labresult;
              this.tableTotalData = res.genestotaldata;
              this.tableData = this.DealGeneData();
            } else {
              this.maxrowno = 0;
              this.maxcolno = 0;
            }
            //this.tableDataLink = res.dt;
          } else {
            this.maxrowno = 0;
            this.maxcolno = 0;
          }
        });
    },
    DealGeneData() {
      var showdata = [];
      for (let i = 1; i <= this.maxrowno; i++) {
        var rowitem = [];
        for (let j = 1; j <= this.maxcolno; j++) {
          var resultitem = this.tableTotalData.find(titem => titem.rowno == i && titem.colno == j);
          if (resultitem) {
            var item = this.tableDataResult.find(result => result.rpt_itemcode == resultitem.rpt_itemcode);
            if (item) {
              if (item.result_str == "阳性") rowitem.push({ rpt_itemname: item.rpt_itemname, rpt_itemcode: item.rpt_itemcode, selectflag: true });
              else rowitem.push({ rpt_itemname: item.rpt_itemname, rpt_itemcode: item.rpt_itemcode, selectflag: false });
            } else {
              rowitem.push({ rpt_itemcode: "", rpt_itemname: "", selectflag: false });
            }
          } else {
            rowitem.push({ rpt_itemcode: "", rpt_itemname: "", selectflag: false });
          }
        }
        showdata.push(rowitem);
      }
      return showdata;
    },
    MouseDown(rownum, colnum) {
      if (this.editflag) {
        var selectitem = this.tableData[rownum - 1][colnum - 1];
        if (selectitem && selectitem.rpt_itemcode) {
          selectitem.selectflag = !selectitem.selectflag;
          var resultstr = "";
          if (selectitem.selectflag) resultstr = "阳性";
          else resultstr = "阴性";
          this.$emit("genechange", { rpt_itemcode: selectitem.rpt_itemcode, result_str: resultstr });
        }
      }
    }
  }
};
</script>
<style scoped>
table {
  font-size: 12px;
  border-collapse: separate;
  /* border-spacing: 5px; */
}

table,
table tr th,
table tr td {
  border: 1px solid #0094ff;
}

/deep/.processingcls td {
  color: #1087ba;
}

/deep/.errocls td {
  color: red;
}

/deep/.erroalreadyread td {
  color: #0a5fb4;
}

.barcoderunning::-webkit-input-placeholder {
  color: #ff0000;
}

/deep/ .parent-row .vxe-cell {
  width: 100% !important;
}

.shelf-detail {
  /* margin-left: 20px; */
  width: 100%;
  height: 100%;
  overflow: auto;
}

.shelf-row {
  height: 55px;
}

.col-title {
  display: inline-table;
  width: 19px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  font-size: 12px;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
  user-select: none;
}

.nofirst-row {
  display: inline-flex;
}

.shelf-inuse-focus {
  height: 55px;
  width: 110px;
  border-style: double;
  /* background-color: rgb(231, 255, 233); */
  margin: 0 0px;
}

.shelf-position {
  height: 55px;
  width: 110px;
  text-align: center;
  border: 1px solid #ebebeb;
  margin-right: -1px;
  margin-bottom: -1px;
  margin-left: -1px;
  margin: 0 0px;
}

.shelf-unuse-focus {
  height: 55px;
  width: 110px;
  border: 1px solid #ebebeb;
}

/* .shelf-inuse {
  background-color: rgb(166, 235, 173);
} */
.radius-color-inuse {
  margin: 0 auto;
  height: 30px;
  width: 30px;
  background-color: rgb(60, 61, 60);
  border: 1px solid #f5f3f3;
  border-radius: 100%;
}

.radius-color-unuse {
  margin: 0 auto;
  height: 30px;
  width: 30px;
  background-color: rgb(255, 255, 255);
  border: 1px solid #000000;
  border-radius: 100%;
}

.radius-rptname-inuse {
  -webkit-user-select: none;
  margin: 0 auto;
  height: 20px;
  /* width: 30px; */
  color: rgb(60, 61, 60);
  padding-top: 7px;
  white-space: nowrap;
}

.radius-rptname-unuse {
  -webkit-user-select: none;
  margin: 0 auto;
  height: 20px;
  /* width: 30px; */
  color: rgb(118 116 116);
  padding-top: 7px;
  white-space: nowrap;
}</style>
